<template>
    <el-upload
            :limit="limit"
            class="upload_img Dialog upload-demo"
            ref="uploads"
            name="uploadFile"
            multiple
            :file-list="imgList"
            :on-success="_uploadSuccess"
            :on-exceed="_handleExceed"
            :on-error="_uploadError"
            :on-remove="_uploadRemove"
            :action="uploadStreamUrl">
        <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
</template>
<script>
    import icon from './PDF.png'
    import {uploadUrl} from '@/services/model/common'
    import constUrl from '@/services/env'

    export default {
        props: {
            // 张数限制
            limit: {
                type: Number,
                default: 9
            },
            value: {
                type: null,
            },
        },
        computed: {
            imgList: {
                get(val) {
                    //  ******！！！  第一次进入时this.imgListModel为null所以取this.value的值  但上传之后，imgListModel一定有值。为了修复上传闪动的bug,第一次进入时取
                    return this.imgListModel || this.initList.map(x => ({name: x.name, url: constUrl + x.url}))
                },
                set(list) {
                    this.imgListModel = list
                    //  将ul-upload 返回带response的对象格式  以及回显的  对象格式全部转化为 后端需要的字符串路径
                    list = list.map(x => {
                        if (x.response) {
                            return {name: x.name, url: x.response.data.path}
                        } else {
                            return {name: x.name, url: x.url.replace(constUrl, '')}
                        }
                    })
                    // // 头像只更新 url  ， 图片列表更新列表
                    let params = list
                    this.$emit('input', params)
                    this.$emit('update', params)
                }
            },
            initList() {
                let initList
                // 上传头像模式 value 传入的是字符窜，而不是数组。
                if (this.isAvatar) initList = this.value ? [this.value] : []
                // 图片列表
                else initList = this.value || []
                return initList
            },
        },
        data() {
            return {
                // 文件上传流url
                uploadStreamUrl: uploadUrl,
                // el-upload的组件列表 刚进入时由于 v-model绑定传值的 value由于异步原因不一定有值，所以在刚加载页面时不能对imgListModel赋值
                // 第一次回显读取图片取 vallue中的值
                imgListModel: null,

            }
        },
        methods: {
            // 添加文件个数限制
            _handleExceed(files, fileList) {
                // 每次只能提交一个文件
                if (this.imgList?.length >= this.limit) {
                    this.$message.warning('最多添加' + this.limit + '份文件')
                    return false
                }
            },
            /**
             * 上传文件之前的钩子，参数为上传的文件
             * 若返回 false 或者返回 Promise 且被 reject，则停止上传。
             */
            // _beforeUpload (file) {
            //   // 文件类型
            //   const FILE_TYPE = file.type
            //   // 文件大小
            //   const FILE_SIZE = Number(file.size || 0)
            //   // 允许上传的图片的类型
            //   const ALLOW_LIST = ['image/jpeg', 'image/png']
            //   // 4M限制
            //   const FILE_SIZE_LIMIT = 1024 * 1024 * 4
            //   if (!ALLOW_LIST.includes(FILE_TYPE) || FILE_SIZE > FILE_SIZE_LIMIT) {
            //     // 文件类型不符提示信息
            //     const TYPE_INFO = '只能上传图片'
            //     // 文件大小超出限制提示信息
            //     const TYPE_SIZE = '文件大小限制4M以内'
            //     const INFO_MSG = !ALLOW_LIST.includes(FILE_TYPE) ? TYPE_INFO : TYPE_SIZE
            //     this.$message.error(INFO_MSG)
            //     return false
            //   }
            // },
            // 上传错误
            _uploadError(err) {
                this.$message.error('上传失败:' + err)
            },
            // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
            _uploadRemove(file, fileList) {
                this.imgList = fileList
            },
            clears() { // 清空图片
                this.$refs.uploads.clearFiles()
            },
            // 修改显示图标
            changeIcon(file) {
                let title = document.getElementsByClassName('el-icon-document')[this.imgList.length - 1]
                // [fileList.length-1]  这个需要特别注意，需要查看当前页面不上传之前有多少个后才能根据具体情况具体分析
                let houzhui
                if (file) {
                   let para = document.createElement("p"); //创建新的<p> 元素
                    let text = this.imgList[this.imgList.length - 1].name
                    let node = document.createTextNode(text); //创建文本节点
                    para.appendChild(node); //向 <p> 元素追加这个文本节点
                    //向已有的元素追加这个新元素
                    title.appendChild(para);
                    houzhui= file.name.split('.') // 获取上传文件的后缀
                    if (houzhui[houzhui.length-1] == 'pdf') {
                        title.classList.add('imgiconPDF')
                    }else if(houzhui[houzhui.length-1] == 'xls'||houzhui[houzhui.length-1] == 'xlsx'){
                        title.classList.add('imgiconExcel')
                    }else if(houzhui[houzhui.length-1] == 'doc'||houzhui[houzhui.length-1] == 'docx'){
                        title.classList.add('imgiconWord')
                    }
                }
                else {
                    let icon
                    this.imgList.map((x,index)=>{
                        let paras = document.createElement("p"); //创建新的<p> 元素
                        icon=document.getElementsByClassName('el-icon-document')[index]
                        //向已有的元素追加这个新元素
                        let node = document.createTextNode(x.name); //创建文本节点
                        houzhui=  x.url.split('.')
                        paras.appendChild(node); //向 <p> 元素追加这个文本节点
                        //向已有的元素追加这个新元素
                        icon.appendChild(paras);
                        if (houzhui[1] == 'pdf') {
                            icon.classList.add('imgiconPDF')
                        }else if(houzhui[1] == 'xls'||houzhui[1] == 'xlsx'){
                            icon.classList.add('imgiconExcel')
                        }else if(houzhui[1] == 'doc'||houzhui[1] == 'docx'){
                            icon.classList.add('imgiconWord')
                        }

                    })
                }
            },
            /**
             * 文件上传成功时的钩子
             */
            _uploadSuccess(res, file, fileList) {
                if (res.code === 200) {
                    this.imgList = fileList
                    this.changeIcon(file)
                    this.$message.success('文件上传成功')
                } else this.$message.error(res.message)
            },
        },
        mounted() {

        }
    }
</script>

<style scoped lang="less">
    /deep/.el-upload-list__item-status-label{
        top: -20px;
    }
    /deep/.el-icon-close{
        top: -20px;
    }
    /deep/ .el-upload {
        height: 20px;
    }

    /deep/ .el-upload-list__item-name {
        margin-right: 0px;
    }

    /deep/ .el-upload-list {
        display: flex;
    }
    /deep/.el-icon-document:before{
        display: none;
    }
    .upload_img /deep/ .el-upload.el-upload--picture-card {
        display: inline-flex;
        flex-direction: column;
        line-height: 1 !important;
        align-items: center;
        background: transparent;
        border: 0px;
        justify-content: center;
    }
    .Dialog /deep/ .imgiconPDF {
        display: inline-block;
        width: 180px;
        height: 100px;
        margin-right: 10px;
        background-image: url("./PDF.png") !important;
        background-size: 50% 80%;
        background-repeat: no-repeat;
        position: relative;

        p {
            position: absolute;
            bottom: 0px;
            font-size: 13px;
            color: black;
            width: 100px;
            overflow: hidden;

            white-space: nowrap;

            text-overflow: ellipsis;
        }
    }
    .Dialog /deep/ .imgiconWord{
        display: inline-block;
        width: 180px;
        height: 100px;
        margin-right: 10px;
        background-image: url("./WORD.png") !important;
        background-size: 50% 80%;
        background-repeat: no-repeat;
        position: relative;
        p {
            position: absolute;
            bottom: 0px;
            font-size: 13px;
            color: black;
            width: 100px;
            overflow: hidden;

            white-space: nowrap;

            text-overflow: ellipsis;
        }
    }
    .Dialog /deep/ .imgiconExcel {

        display: inline-block;
        width: 180px;
        height: 100px;
        margin-right: 10px;
        background-image: url("./excel.png") !important;
        background-size: 50% 80%;
        background-repeat: no-repeat;
        position: relative;

        p {
            position: absolute;
            bottom: 0px;
            font-size: 13px;
            color: black;
            width: 100px;
            overflow: hidden;

            white-space: nowrap;

            text-overflow: ellipsis;
        }
    }
    /deep/ .el-upload-list__item {
        margin-right: 20px;
    }
</style>
